<template>
    <ul class="left bb"
        >
        <li v-for="(v, i) in fvirtualcointypeList"
            :key="i"
            class="items">
            <h2 v-text="v.txt">USDT</h2>
            <h3 class="cur animation"
                :class="{active: selected === (v.value+100   )}"
                :data-i="(2 * i)"
                v-text="Lang.type[lang][0]" @click="e_select(v.value,1)">买入</h3>
            <h3 class="cur animation"
                :class="{active: selected === (v.value)}"
                :data-i="(2 * i + 1)"
                v-text="Lang.type[lang][1]" @click="e_select(v.value,0)">卖出</h3>
        </li>
    </ul>
</template>

<script>
import Lang from './lang'
import {vpost, vlink} from '@api'
export default {
	name: 'left',
	data() {
		return {
			Lang,
			selected: 1,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	created() {},
	props: {
		fvirtualcointypeList: {
			default: 0,
		},
	},
	methods: {
		e_select(id, type) {
			this.selected = id+(type*100)

			let input = {
				id: id,
				type: type,
			}
			this.$emit('select', input)
		},
	},
}
</script>

<style scoped>
.left {
	padding: 10px;
}
.items {
	margin-bottom: 20px;
	border-bottom: 1px solid rgb(41, 41, 41);
	padding-bottom: 20px;
}
h2,
h3 {
	font-weight: 100;
}
h2 {
	margin: 0;
	font-size: 20px;
	color: var(--clr2);
}
h3 {
	margin: 0 0 0 30px;
	line-height: 24px;
	font-size: 14px;
	color: var(--clr0);
}
h3:hover,
.active {
	color: var(--clr1);
}
</style>
